<template>
  <div>
    <el-table
      :data="cameraList"
      style="width: 100%"
    >
      <el-table-column :label="$t('icon')" width="150">
        <template slot-scope="scope">
          <el-image
            style="width:90px;height: 60px;"
            :src="scope.row.picturePath"
            :preview-src-list="[scope.row.picturePath]"
            fit="fit"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('name')"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.name">
            <template slot="append">
              <i class="el-icon-check" @click="updateCameraBind(scope.row)" />
            </template>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="hid"
        :label="$t('hid')"
      />
      <el-table-column width="100" :label="$t('function')" >
        <template slot-scope="scope">
          <el-button
            style="color: #f56c6c"
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  listCameraBind,
  deleteCameraBind,
  updateCameraBind
} from '@/api/camera/cameraBindApi'
import { successNotice } from '@/util/common'
export default {
  name: 'CameraManage',
  props: {
    deviceCore: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      cameraList: []
    }
  },
  created() {
    this.listCameraBind()
  },
  methods: {
    updateCameraBind(item) {
      updateCameraBind({
        ...item
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.listCameraBind()
        }
      })
    },
    del(item) {
      deleteCameraBind({
        bindId: item.bindId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          this.listCameraBind()
        }
      })
    },
    listCameraBind() {
      listCameraBind({
        deviceCore: this.deviceCore
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.cameraList = data
        } else {
          this.cameraList = []
        }
      })
    }
  }
}
</script>


